기본 테마

기본값은 밝은 테마입니다. 왼쪽 위 앱 메뉴에서 설정 → 모양을 열면 어두운 테마나 다른 테마로 바꿀 수 있습니다.

CSS로 테마 만들기

코드 노트를 만들고 언어를 CSS로 지정합니다. 속성에 #appTheme=my-theme-name을 추가합니다. my-theme-name은 원하는 테마 이름으로 바꿉니다. 본문에 다음과 같은 스타일을 작성합니다.

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('/custom/fonts/raleway.woff2') format('woff2');
}

:root {
    --main-font-family: 'Raleway' !important;
    --main-font-size: normal;
    --tree-font-family: inherit;
    --tree-font-size: normal;
    --detail-font-family: inherit;
    --detail-font-size: normal;
    --detail-text-font-family: 'Garamond' !important;

    --main-background-color: #404552;
    --main-text-color: #AFB8C6;
    --main-border-color: #AFB8C6;
    --accented-background-color: #383C4A;
    --more-accented-background-color: #2F343F;
    --header-background-color: #383C4A;
    --button-background-color: #2F343F;
    --button-disabled-background-color: #404552;
    --button-border-color: #333;
    --button-text-color: #AFB8C6;
    --button-border-radius: 2px;
    --primary-button-background-color: #6c757d;
    --primary-button-text-color: white;
    --primary-button-border-color: #6c757d;
    --muted-text-color: #86919F;
    --input-text-color: #AFB8C6;
    --input-background-color: #404552;
    --hover-item-text-color: white;
    --hover-item-background-color: #4877B1;
    --active-item-text-color: white;
    --active-item-background-color: #4877B1;
    --menu-text-color: #AFB8C6;
    --menu-background-color: #383C4A;
    --tooltip-background-color: #383C4A;
    --link-color: lightskyblue;
    --modal-background-color: #404552;
    --modal-backdrop-color: black;
    --scrollbar-border-color: rgba(175, 184, 198, 0.5);
}

body .note-detail-text {
    font-size: 120%;
}

body .CodeMirror {
    filter: invert(100%) hue-rotate(180deg);
}

테마 적용

설정 → 모양의 테마 목록에서 #appTheme 라벨에 지정한 이름을 선택합니다. CSS를 수정한 뒤에는 Ctrl+R로 화면을 새로고침합니다.

공유와 가져오기

원문에서 안내하는 테마 내보내기 형식은 .tar입니다. 외부 테마에는 실행 가능한 스크립트가 들어 있을 수 있으므로 신뢰할 수 있는 출처인지 확인하세요. 기본 예제에는 강철빛 파랑 테마가 있습니다.

화면 일부에 CSS 적용

테마와 별개로 특정 요소만 꾸밀 수도 있습니다. CSS 코드 노트를 만들고 #appCss 라벨을 추가한 다음 스타일을 작성합니다.

/* 특정 화면 요소에 적용할 CSS */
.tree-item {
    color: #ff6347; /* 트리 항목의 글자색 변경 */
}

앱 화면이 시작될 때 appCss가 지정된 모든 노트의 CSS를 불러옵니다. 수정한 뒤 Ctrl+R로 새로고침하세요.

특정 노트 꾸미기

cssClass 속성의 값에 CSS 클래스 이름을 지정합니다. iconClass에는 Box Icons의 아이콘 클래스나 직접 만든 클래스를 지정할 수 있습니다. PNG 이미지 노트처럼 특정 유형에 적용하려면 type-image mime-image-png 같은 클래스를 사용합니다.

다른 사용자의 테마

테마 모음에서 커뮤니티가 만든 테마를 살펴보세요.

기본 파일 경로

기본 이미지 등을 참조할 때 버전 번호 대신 vX 별칭을 사용하면 업데이트에 대응하기 쉽습니다. 예를 들어 /assets/v0.57.0-beta/images/icon-grey.png 대신 /assets/vX/images/icon-grey.png를 사용합니다.